<template>
    <div>
        <el-table :data="TableData" style="width: 100%">
        <el-table-column label="账号" prop="account" />
        <el-table-column label="用户组" prop="userGroup" />
        <el-table-column label="创建时间">
            <template #default="scoped">
                {{ formatTime(scoped.row.ctime) }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scoped">
                <el-button type="primary" @click="edit(scoped.row)">编辑</el-button>
                <el-button type="danger" @click="del(scoped.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">
        <el-pagination 
        v-model:current-page="formData.currentPage" 
        v-model:page-size="formData.pageSize"
        :page-sizes="[5, 10, 15, 20]" 
        background 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total"
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" />
    </div>
    </div>

    <el-dialog v-model="bj" title="信息编辑" width="800">
    <el-form :model="form">
      <el-form-item label="账号名">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="bj = false">Cancel</el-button>
        <el-button type="primary" @click="bj = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import {ref,reactive} from 'vue'
import { accountList,accountDel } from '@/api/account';
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus';

const TableData = ref([])
const total = ref(0)
const formData = reactive({
    currentPage:1,
    pageSize:10
})

const bj = ref(false)
const form = reactive({
    id:'',
    account:'',
    userGroup:''
})

const getAccountList = async()=>{
    let res = await accountList(formData)
    TableData.value = res.data;
    total.value = res.total;
    console.log(TableData.value);
}
getAccountList()

const handleCurrentChange = (val) => {
    console.log(val);
    console.log(formData);
    getAccountList()
}

const handleSizeChange = (val) => {
    getAccountList()
}

const formatTime = (time)=>{
    return dayjs(time).format('YYYY年MM月DD日 HH:mm:ss'); 
}

const del = async(id) =>{
    let {code,msg} = await accountDel({id})
    if(code == 0){
        ElMessage.success(msg)
        getAccountList()
    }else{
        ElMessage.error(msg)
    }
}

const edit = (row) =>{
    console.log(row);
    bj.value = true
}
</script>

<style scoped>
.page{
    margin-top: 20px;
}
</style>